import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, FlatList, PixelRatio } from "react-native";
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { Common } from '../../../component/common/Common';

const scale = GLOBAL.SCALE;
const echartIcon = require('../../../imgs/global/echart.png');
const selectTypes = {
	first: [{
		value: '全部',
		id: '0'
	}, {
		value: '聚乙烯',
		id: '1'
	}, {
		value: '甲苯',
		id: '2'
	}],
	two: [{
		value: '2018-08-01',
		id: '1'
	}, {
		value: '2018-08-02',
		id: '1'
	}]
}

export class ProductPricePage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '商品对标价列表',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} />,
			headerTintColor: style.color.dark,
			headerStyle: style.headTow.headerStyleWidthBorder,
			headerTitleStyle: style.headTow.headerTitleStyle,
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			pageStatus: {
				status: 'loading'
			},
			selectLeftValue: '全部',
			selectRightValue: '2018-08-01',
			checkedLeftIndex: 0,
			checkedRightIndex: 0,
			isLoad: true,   // 是否数据加载完成
			data: [],   // 列表数据存储
			recordCount: 0,   // 数据总条数
			nowList: 0,  // 当前条数
			loadIcon: false, // 下拉涮新的 图标
			index: 0, // 控制tab选项卡
		}
	}

	componentWillMount () {
		this.pageNo = 1;
		let totalPage = 0;

		this._getProductPriceList(1, true);
	}

	async _getProductPriceList (pageNo, onrefresh) {
		this.setState({
			loadIcon: true
		})

		let reqProductPrice = {
			pageNo: pageNo,
			pageSize: 10
		};

		let responseData = await HTTP.POST(API_GENERATE(API.PRODUCT_PRICE_LIST), reqProductPrice);
		this.setState({
			loadIcon: false,
			isLoad: false,
		})

		if (responseData && responseData.rows.length) {
			totalPage = responseData.totalPage;
			if (onrefresh) {  // 刷新
				this.setState({
					data: responseData.rows,
					recordCount: responseData.recordCount,
					nowList: responseData.rows.length
				})
			} else {  // 加载
				this.setState({
					data: this.state.data.concat(responseData.rows),
					recordCount: responseData.recordCount,
					nowList: this.state.nowList + responseData.rows.length
				})
			}
		} else {
			this.setState({
				pageStatus: {
					status: 'empty',
					emptyText: '还没有价格哦~'
				},
				loadIcon: false,
				isLoad: false,
			})
		}
	}

	_selectProductPrice (item, key, index) {
		const { selectItems, selectLeftValue, selectRightValue, checkedLeftIndex, checkedRightIndex } = this.state;
		this.setState({
			showLeftSelectList: false,
			showRightSelectList: false,
			selectLeftValue: key === 'first' ? item.value : selectLeftValue,
			selectRightValue: key === 'two' ? item.value : selectRightValue,
			checkedLeftIndex: key === 'first' ? index : checkedLeftIndex,
			checkedRightIndex: key === 'two' ? index : checkedRightIndex
		})

		this._getProductPriceList();
	}

	//list 渲染数据
	_renderData = () => {
		const { data } = this.state;
		return (
			<FlatList
				data={data}
				renderItem={this._renderItemView.bind(this)}
				refreshing={this.state.loadIcon}
				onRefresh={this._isLoadRefresh.bind(this)}
				onEndReachedThreshold={0.8}
				onEndReached={this._loadData.bind(this)}
			/>
		);
	}

	// 下拉刷新函数
	_isLoadRefresh () {
		this.pageNo = 1;
		this._getProductPriceList(this.pageNo, true);
	}

	// 上拉加载
	_loadData () {
		if (totalPage > this.pageNo) {
			this.pageNo++;
			this._getProductPriceList(this.pageNo, false);
		}
	}

	//一条数据模板
	_renderItemView = ({ item, index }) => {
		return (
			<TouchableOpacity key={index} style={styles.priceListItemCont} onPress={() => {
				this.props.navigation.navigate('ProductPriceDetailPage', { data: item, title: '价格图' });
			}} >
				<View style={styles.priceListItem}>
					<Text style={[styles.priceListItemValue, { textAlign: 'center', paddingLeft: 10 * scale }]}>{item.goodsName}_{item.locationCode}({item.marketType})</Text>
					<Text style={[styles.priceListItemValue, { color: item.isChange === 1 ? style.color.lightRed : style.color.lightBlue }]}>
						{item.price}
						<Text style={[styles.priceListItemValue, { textAlign: 'right' }]}>{item.uom || "元/吨"}</Text>
					</Text>
					{/* <Text style={[styles.priceListItemValue, { color: item.isChange === 1 ? style.color.lightRed : style.color.lightBlue }]}>{item.change}</Text> */}
					<Text style={styles.priceListItemValue}>{item.prodDate.substring(0, 10)}</Text>
				</View>
				<View style={styles.priceListItem}>
					<Text style={[styles.priceListItemLabel, { textAlign: 'center', paddingLeft: 10 * scale }]}>({item.marketCode})</Text>
					<Text style={styles.priceListItemLabel}></Text>
					<View style={styles.priceListItemImg}><Image style={styles.echartIcon} source={echartIcon} /></View>
				</View>
			</TouchableOpacity>
		)
	}

	render () {
		const { pageStatus, showSelectList, selectItems, selectLeftValue, selectRightValue, showLeftSelectList, showRightSelectList,
			checkedIndex, checkedLeftIndex, checkedRightIndex, data, recordCount, nowList } = this.state;

		return (
			<View style={styles.container}>
				<View style={styles.priceListLabelsCont}>
					<Text style={[styles.priceListLabel]}>商品</Text>
					<Text style={styles.priceListLabel}>价格</Text>
					{/* <Text style={styles.priceListLabel}>涨跌(幅度)</Text> */}
					<Text style={styles.priceListLabel}>最新时间</Text>
				</View>

				{/* // <View style={styles.container}>
					// 	<View style={styles.selectTypes}>
					// 		<CommonSelect
					// 			data={selectTypes.product}
					// 			value={selectLeftValue}
					// 			ifPullDown={showLeftSelectList}
					// 			checkSelect={() => {
					// 				this.setState({
					// 					selectItems: {
					// 						value: selectTypes.first,
					// 						key: 'first'
					// 					},
					// 					showLeftSelectList: !showLeftSelectList,
					// 					showRightSelectList: false
					// 				})
					// 			}} />
					// 		<CommonSelect
					// 			data={selectTypes.time}
					// 			value={selectRightValue}
					// 			ifPullDown={showRightSelectList}
					// 			checkSelect={() => {
					// 				this.setState({
					// 					selectItems: {
					// 						value: selectTypes.two,
					// 						key: 'two'
					// 					},
					// 					showLeftSelectList: false,
					// 					showRightSelectList: !showRightSelectList
					// 				})
					// 			}} />
					// 	</View>
					// 	{
					// 		showLeftSelectList || showRightSelectList ?
					// 			<CommonSelectList
					// 				checkedIndex={selectItems.key === 'first' ? checkedLeftIndex : checkedRightIndex}
					// 				data={selectItems}
					// 				checkItem={(item, key, index) => { this._selectProductPrice(item, key, index) }}
					// 				allClick={() => {
					// 					this.setState({
					// 						showLeftSelectList: false,
					// 						showRightSelectList: false
					// 					})
					// 				}} />
					// 			: null
					// 	} */}

				<View style={{ marginBottom: 80 }}>
					{data.length > 0 ? this._renderData() : <PageStatusIndex status="empty" emptyText="暂无记录" />}
				</View>
				{/* //</View> */}
				{
					data.length > 0 ? <PageStatusIndex status="bottom" recordCount={recordCount} nowList={nowList} /> : null
				}
			</View >
		)
	}

}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
	},
	selectTypes: {
		flexDirection: 'row',
		justifyContent: 'center',
	},
	priceListLabelsCont: {
		flexDirection: 'row',
		alignItems: 'center',
		backgroundColor: '#F6F6F6',
		height: 30 * scale,
	},
	priceListLabel: {
		flex: 1,
		textAlign: 'center',
		fontSize: 12 * scale,
		color: style.color.darkGray,
	},
	priceListItemCont: {
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
	},
	priceListItem: {
		flexDirection: 'row',
		alignItems: 'center',
		height: 30 * scale,
	},
	priceListItemValue: {
		flex: 1,
		textAlign: 'center',
		fontSize: 13 * scale,
		color: style.color.normal,
	},
	priceListItemLabel: {
		flex: 1,
		fontSize: 12 * scale,
		textAlign: 'left',
		color: style.color.darkGray,
		marginLeft: 16 * scale,
	},
	priceListItemImg: {
		flex: 1,
	},
	echartIcon: {
		width: 18 * scale,
		height: 18 * scale,
		alignSelf: 'flex-end',
		marginRight: 30 * scale
	}
})